<template>
  <div class="home">
    <NavBar />
    
    <header class="hero">
      <div class="hero-content">
        <h1 class="title">XappTool</h1>

        <div class="buttons">
          <button class="btn btn-primary" @click="goto('/console')">立即使用</button>
          <button class="btn btn-secondary" @click="goto('/price')">服务价格</button>
        </div>
      </div>
    </header>
    <section class="features">
      <div class="feature" v-for="(feature, index) in features" :key="index">
        <div class="feature-icon">{{ feature.icon }}</div>
        <h3>{{ feature.title }}</h3>
        <p>{{ feature.description }}</p>
      </div>
    </section>


  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';

export default {
  components: {
    NavBar
  },
  data() {
    return {
      features: [
        { icon: '💡', title: '自动获取安装参数', description: '通过URL自动传参，精准识别APP安装来源。' },
        { icon: '⚡', title: '免填邀请码', description: '无需用户填写邀请码，提升用户体验。' },
        { icon: '📱', title: '轻松区分APP安装来源', description: '支持多种平台，轻松管理安装来源。' },
        { icon: '🔧', title: '支持多种开发平台', description: '提供多种接入SDK，支持多平台开发。' }
      ]
    };
  },
  methods: {
    goto (path){
      this.$router.push(path);
    }
  }
};
</script>

<style scoped>
.home {
  min-height: 100vh;
}

.hero {
  padding: 4rem 2rem;
  background-image: url('@/assets/bg.png');
  background-size: 50%;
  background-position: right;
  background-repeat: no-repeat;
}

.title {
  font-size: 3.5rem;
  color: #6478ff;
  margin-bottom: 2rem;
}

.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 4rem 2rem;
}

.feature {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.feature h3 {
  color: #2a2a2a;
  margin-bottom: 1rem;
}

.feature p {
  color: #666;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .hero {
    padding: 2rem 1rem;
  }
  .title {
    font-size: 2.5rem;
  }
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style> 